import React, { useState, useImperativeHandle, forwardRef } from 'react'
import { Picker, Image, Popup, Input, Calendar } from 'antd-mobile'
import "./index.less"

function EditTime (props, ref) {
    const defaultSingle = new Date()
    const [visible, setVisible] = useState(false)
    const [calendarVal, setCalendarVal] = useState();

    useImperativeHandle(ref, () => ({
        changeVisivle: () => setVisible(true),
        calendarVal: calendarVal,
    }))

    const submitBtn = () => {
        setVisible(false)
        props.getCanlendarVal(calendarVal)
    }
    return (
        <Popup
            visible={visible}
            onMaskClick={() => {
                setVisible(false)
            }}
            bodyStyle={{ height: '40vh' }}
        >
            <div className='modal-wrapper'>
                <div className="m-tit">
                    <span onClick={() => setVisible(false)}>取消</span>
                    <span onClick={submitBtn}>确定</span>
                </div>

                <Calendar
                    selectionMode='single'
                    defaultValue={defaultSingle}
                    onChange={val => {
                        setCalendarVal(val)
                    }}
                />
            </div>
        </Popup>
    );
}

export default forwardRef(EditTime);
